<template>
	<view style="padding-top: 10rpx;">
		<view class="above">
			<view class="left">
				<u--image :src="posting.avatarUrl" 
					width="70rpx" height="70rpx" shape="circle"
				></u--image>
				<view style="padding-left: 10rpx; display: flex; flex-direction: column; justify-content: center;">
					<text class="nickName">{{ posting.nickName }}</text>
					<text class="postTime">{{ posting.showTime }}</text>
				</view>
			</view>
			<view class="right">
				<text style="color: #525cb4; font-weight: 300; font-size: 0.75rem;">举报</text>
			</view>
		</view>
		<view class="content" style="padding-bottom: 10rpx;">
			<u-parse :content="posting.detail"></u-parse>
		</view>
		<view class="imgContent">
			<view v-for="(item, index) in posting.imgList" style="margin-right: 6rpx;">
				<u--image :showLoading="true" :src="item" 
					width="237rpx" height="170rpx" mode="widthFix" radius="10"
					@click="imgPreview(item)">
				</u--image>
			</view>
		</view>
		<view class="below">
			<view class="left">
				<view style="margin-right: 10rpx;">
					<u-tag style="font-weight: 400" :text="'# ' + posting.categoryName" 
						size="mini" bgColor="#f8f8f8" borderColor="#f8f8f8" 
						color="#8f8688" shape="circle"
					>
					</u-tag>
				</view>
				<text v-if="posting.readNum > 100" style="font-size: 0.6rem; color: #b4b4b4; margin-left: 8prx;">{{posting.readNum}} 次围观</text>
			</view>
			<view class="right">
				<view>
					<u--text prefixIcon="share-square" text="分享" size="13"></u--text>
				</view>
				<view style="margin-left: 10rpx;" @click.stop="onLikePosting">
					<u--text :prefixIcon="likeIcon" :text="likeNum" size="13"></u--text>
				</view>
			</view>
		</view>
	</view>
</template>



<script>
	
	import { likePosting } from '@/apis/posting.js'
	
	
	export default {
		data() {
			return {
			}
		},
		props: {
			posting: {
				id: '',
				nickName: '',
				content: '',
				abstractContent: '',
				avatarUrl: '',
				createTime: '',
				likeNum: 0,
				readingNum: 0,
				likeStatus: 0,
				imgList: [],
				readNum: 0
			}
		},
		computed: {
			likeIcon: function(){
				return this.posting.likeStatus === 0 ? 'thumb-up' : 'thumb-up-fill';
			},
			likeNum: function() {
				return this.posting.likeNum;
			}
		},
		methods: {
			// 图片大图
			imgPreview(current){
				uni.previewImage({
					current: current,
					indicator:"number",
					loop:true,
					urls: this.posting.imgList
				})
			},
			// 点赞
			onLikePosting() {
				let newLikeStatus = this.posting.likeStatus == 0 ? 1 : 0;
				let data = {
					postingId: this.posting.id,
					type: newLikeStatus
				};
				likePosting(data).then(res => {
					this.posting.likeStatus = newLikeStatus;
					if (newLikeStatus == 1) {
						this.posting.likeNum = this.posting.likeNum + 1;
					} else {
						this.posting.likeNum = this.posting.likeNum - 1;
					}
				})
			}
		}
	}
	
</script>

<style scoped>
	
	.above {
		display: flex;
		justify-content: space-between;
	}
	
	.above .left {
		display: flex;
	}
	
	.above .nickName {
		height: 50rpx; 
		line-height: 50rpx;
		color: #678195;
		font-weight: 600;
	}
	
	.above .postTime {
		height: 30rpx;
		line-height: 30rpx;
		color: #c1c1c1;
		font-weight: 300;
		font-size: 0.7rem;
	}
	
	.below {
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
	}
	
	.below .left {
		display: flex;
		align-items: center;
	}
	
	.below .right {
		display: flex;
	}
	
	.imgContent {
		display: flex;
		flex-wrap: wrap;
	}
	
	.content {
		font-size: 0.9rem !important;
	}
	
	
</style>